<template>
  <!-- 登陆页面 -->
  <div class="login-background">
    <!-- <ul>
      <li>
        <img src="../../assets/pic/pic1.jpg" />
      </li>
      <li>
        <img src="../../assets/pic/pic2.jpg" />
      </li>
      <li>
        <img src="../../assets/pic/pic3.jpg" />
      </li>
      <li>
        <img src="../../assets/pic/pic4.jpg" />
      </li>
    </ul> -->
    <div class="login-box">
      <div class="login-logo">
        <!-- logo区域 -->
        <img src="../../assets/logo.png" alt="" />
      </div>
      <!-- 注册登录 -->
      <!-- 表单标签 -->
      <el-form class="login-form" ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="80px">
        <!-- 需要使用prop值域进行是否验证该项 -->
        <el-form-item prop="username">
          <el-input type="text" v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-warning"></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      // 表单数据
      loginForm: {
        username: "admin",
        password: "123456",
      },
      // 表单验证对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 登录点击事件
    login() {
      // 验证
      this.$refs.loginFormRef.validate(async (vaild) => {
        // 判断表单是否合法
        if (!vaild) {
          return this.$message.error("登录信息认证失败");
        } else {
          this.$message.success("登录信息认证成功");
          console.log("验证成功");
          // 发送请求
          const { data: res } = await this.$http.post("login", this.loginForm);
          // 判断是否请求成功
          if (res.meta.status !== 200) {
            return this.$message.error("请求失败");
          } else {
            this.$message.success("请求成功");
            // 生成token
            window.sessionStorage.setItem("token", res.data.token);
            // 页面跳转
            this.$router.push("home");
          }
        }
      });
    },
    // 重置点击事件
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.login-background {
  width: 100vw;
  height: 100vh;
  background-image: url("../../assets/pic/灵魂莲华.webp");
  background-size: 100%;
  /* 图片定位 */
  background-position: center center;
  /* 背景图片不随滚动而滚动 */
  background-attachment: fixed;
}
.login-box {
  // 透明度
  opacity: 0.7;
  width: 450px;
  height: 300px;
  // 将所有元素居中
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  // 背景颜色
  background-color: #fff;
  // 圆角
  border-radius: 5px;
  .login-logo {
    width: 130px;
    height: 130px;
    // 内边距
    padding: 10px;
    // 居中
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    // 圆角
    border-radius: 50%;
    // 边框颜色设置
    border: 1px solid #eee;
    // 盒子背景颜色设置
    background-color: #fff;
    // 图片样式
    img {
      width: 100%;
      height: 100%;
      // 背景颜色
      background-color: #eeeeee;
      // 圆角
      border-radius: 50%;
    }
  }
}
.login-form {
  width: 100%;
  // 盒子模型
  box-sizing: border-box;
  // 将盒子放在最下面
  position: absolute;
  bottom: 0;
  padding-right: 40px;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
</style>
